// 引入当前跟目录和 package.json同级
const path = require("path");
// 配置webpack.config.js文件
// 提取css文件的路径

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 引入需要自动生成的文件包的路径
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 导入清除插件
const {
  CleanWebpackPlugin
} = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js", // 项目入口
  //   entry: "./path/to/my/entry/file.js",
  output: {
    filename: "bunle.js", // 默认打包后的文件名
    path: path.resolve(__dirname, "dist"), // 默认打包的文件目录dist
  },

  // [错误追踪配置]
  devtool: "source-map", // 生成映射源代码文件
  //配置文件项的
  module: {
    rules: [
      // // 配置css加载器
      // {
      //     test: /\.css$/, // 匹配css扩展名文件
      //     use: [
      //         // 配置loader加载器
      //         "style-loader", // 把css代码写入到网页中
      //         "css-loader", // 读取css的代码
      //     ],
      // },
      // 配置less的加载器
      {
        test: /\.less$/, // 匹配less扩展的文件
        use: [
          // 配置loader加载器
          "style-loader", // 把less代码写入到网页中
          "css-loader", // 读取less的代码
          "less-loader", // 解释编译less代码
        ],
      },
      // 配置图片的加载器
      {
        test: /\.(png|svg|jpg|gif)$/, // 匹配图片文件
        use: [{
          loader: "file-loader", // 处理图片文件返回链接
          options: {
            publicPath: "./images/", // 引入图片时会在路径前面加上该选项
            outputPath: "images", //  输出到dist下的images目录
          },
        }, ],
      },
      // 提取css文件
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  // 添加插件配置选项
  plugins: [
    // 插件使用2. plugins 属性当中,创建实例, 按需添加参数
    // 这个插件如果不放任何参数, 默认生成 main.css 文件
    // 如果想要修改文件名, 就可以给一个配置对象, 然后里面添加 filename 属性
    new MiniCssExtractPlugin(),
    // new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "public/aaa.html", // template指定默认html模板
    }),
  ],
};